<template>
    <div>
        <h1>Count组件求和为{{sum}}</h1>
        <h1>人员列表</h1>
        <input type="text" v-model="name"  placeholder="请输入名字"/>
        <button @click="addPerson(name)">添加</button>
        <ul>
            <li v-for="item in personList" :key="item.id">{{item.name}}</li>
        </ul>
    </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import {nanoid} from 'nanoid'
export default {
    name: 'Person',
    data() {
        return {
            name: ''
        }
    },
    methods: {
        addPerson() {
            const personObj = {id: nanoid(), name: this.name};
            this.$store.commit('addPerson', personObj);
            this.name = '';
        }
    },
    computed: {
        //计算属性写法
        /* personList() {
            return this.$store.state.personList
        }, */
       ...mapState(['personList','sum'])
    }

}
</script>

<style>

</style>